<script setup>
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import { useEventBus } from '@vueuse/core'
import { useCountDown } from '@/hooks/useCountDown.js'

const visible = ref(false)
const bus = useEventBus('showScanCodeModal')
const unsubsicribe = bus.on(listener)

const qrCodeData = ref('{"id":"APP_7B3F36A14E99410A80B37AEF332E3247","sUrl":"http://tysfxt.cponline.cnipa.gov.cn/coss/mobile/v1/getServiceInfo","o":"KHE0DgQEUHoQY3VnfmQ2YgxABxdtBVUADWBnYWYJXVwXcwYdUlx9ZDcyXREHQ3EAEh0aOSojNU1KRyEJdX4TFG8lNiIcGQocYggSABZ9cS4=","cv":"2.0"}')
const { start, pause, count } = useCountDown()
function listener(data) {
  if (data) {
    start(10 * 60 * 1000)
    visible.value = true
  }
}

function handleClose() {
  visible.value = false
  bus.off(listener)
  pause()
}
</script>

<template>
  <el-dialog
    v-model="visible"
    :align-center="true"
    width="25%"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <el-alert show-icon type="warning" title="当前提交人账号已退出，请使用经办人账号扫码登录！" class="mb-4" />

    <div class="flex-col-center">
      <div class="text-xl text-center font-bold">
        扫码登录
      </div>
      <div class="qrcode relative">
        <vue-qr :text="qrCodeData" />
        <div class="bg-[rgba(0,0,0,0.5)] text-center text-white text-base font-bold absolute top-0 left-0 w-full h-full flex-col-center cursor-pointer" v-if="count === 0">
          <el-icon :size="30"><Refresh /></el-icon>
          <div class="mt-2">
            二维码失效，请点击重试
          </div>
        </div>
      </div>
      <div class="flex-col items-center flex mt-2">
        <p>打开 专利业务办理App</p>
        <p>扫描二维码登录</p>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
